<template>
  <div class="Information" :style="{ 'background-image': 'url(' + detailData.bannerImageUrl + ')' }">
    <div class="layout">
      <div class="menu">
        <h2>
          文章/公告
        </h2>
        <ul class="list">
          <li v-for="item in navList" :key="item.id" :class="item.urlName===activeUrlName?'active':null" @click="changeContent(item.urlName)">
            <span>{{ item.title }}</span>
          </li>

        </ul>
      </div>
      <div class="content">
        <h1>{{detailData.newUrlName  }}</h1>
        <div class="article">
          <h1 class="title">{{ detailData.name }}</h1>
          <slot v-for="item in detailData.newSections" :key="item.id">
            <h3 class="subtitle">{{ item.title }}</h3>
            <!-- <div class="section">
              <p>{{ item.content }}</p>
            </div> -->
            <div class="section" v-for="(itm,idx) in item.contents" :key="idx">
              <p>{{ itm }}</p>
            </div>
          </slot>
          <div class="footer-img">
            <img :src="detailData.footerImageUrl" alt="">
          </div>
          <!--          
          <h3 class="subtitle">项目优势</h3>
          <div class="section">
            <ul class="points">
              <li>
                <h1>优质稳定的合作资源，四际认可度高</h1>
                <p>我校是全国首批进行出国留学项目办学的高校之一，己有20余年的项目发展历史，与 300 余所国外商校建立合作，因此我校课程有广泛的国际认可度。且国际商学院于 2023 年获得了 AACSB 认证，进入全球顶尖商学院之列，使学生中请国外大学的优势更加明显</p>
              </li>
            </ul>

          </div> -->

        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { toRefs, getCurrentInstance, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "Information",
  components: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const route = useRoute();
    const router = useRouter();
    let dataObj = reactive({
      activeUrlName: route.query.urlName ? route.query.urlName : "",
      detailData: {},
      navToRight: require("./img/nav-to-right.png"),
      activeNavToRight: require("./img/active-nav-to-right.png"),
      imageUrl: require("./img/information-banner.png"),
      navList: []
    });

    // console.log(route.query.urlName);
    /**
     * 请求接口
     */
    let capitalizeFirstLetter = (string) => {
      return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
    };
    let getContenDetail = () => {
      proxy.$https
        .get(
          `/api/admin/prod-api/art/aboutUsArticle/detail/${dataObj.activeUrlName}`
        )
        .then((res) => {
          var newSections = res.data.sections.map((item) => {
            var contentsArr = item.content.split("\n");
            return {
              ...item,
              contents: contentsArr
            };
          });
          var newUrlName = capitalizeFirstLetter(res.data.urlName)
            .split("_")
            .join(" ");
          dataObj.detailData = { ...res.data, newUrlName, newSections };
        });
    };
    let getNavList = () => {
      proxy.$https
        .get("/api/admin/prod-api/art/aboutUsArticle/listForWeb")
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            dataObj.navList = res.data;
            dataObj.activeUrlName = route.query.urlName
              ? route.query.urlName
              : res.data[0].urlName;
          }
        });
    };
    watch(
      () => route.query.urlName,
      (newVal, oldVal) => {
        // 监听路由参数的变化
        if (route.query.urlName) {
          if (newVal !== oldVal) {
            dataObj.activeUrlName = route.query.urlName;
            getContenDetail();
            window.localStorage.setItem("activeId", route.query.activeId);
            window.localStorage.setItem("preActiveId", route.query.preActiveId);
            // console.log("参数id变化了：", route.query.urlName);
          }
        }

        // 你可以在这里根据id做相应的处理
      }
    );
    onMounted(() => {
      dataObj.activeUrlName = route.query.urlName;
      getNavList();
      getContenDetail();
    });

    const changeContent = (urlName) => {
      let preActiveId = "",
        activeId = "";
      switch (urlName) {
        case "bfsu":
          preActiveId = "1";
          activeId = "1-1";
          break;
        case "ibs":
          preActiveId = "1";
          activeId = "1-2";
          break;
        case "dean_speech":
          preActiveId = "1";
          activeId = "1-4";
          break;
        case "vision":
          preActiveId = "1";
          activeId = "1-3";
          break;
        case "cert":
          preActiveId = "1";
          activeId = "1-5";
          break;
        default:
          preActiveId = "1";
          activeId = "1-1";
      }

      dataObj.activeUrlName = urlName;
      router.push({
        path: route.path,
        query: {
          urlName,
          preActiveId,
          activeId
        }
      });
    };
    return {
      ...toRefs(dataObj),
      changeContent
    };
  }
};
</script>
  <style scoped lang="scss">
@font-face {
  font-family: "font-one";
  src: url("../../../assets/Morganite-Black-2.ttf");
}
.Information {
  width: 100%;
  background: no-repeat left top;
  background-size: 100% 364px;
  padding-bottom: 180px;
  .layout {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .menu {
      width: 242px;
      padding-top: 278px;
      h2 {
        width: 100%;
        height: 86px;

        font-family: HarmonyOS_Sans_SC_Black;
        font-size: 40px;
        color: #ffffff;
        line-height: 86px;
        font-style: normal;
        background: #ff6b19;
        padding-left: 30px;
      }
      .list {
        background: linear-gradient(
          180deg,
          rgba(255, 107, 25, 0.3) 0%,
          rgba(255, 107, 25, 0.1) 100%
        );
        li {
          width: 100%;
          padding: 0 30px;
          height: 63px;
          cursor: pointer;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #2a2a2a;
            line-height: 63px;
            text-align: left;
            font-style: normal;
            display: block;
          }
        }
        li:not(:last-child) {
          span {
            border-bottom: solid 1px rgba(255, 107, 25, 0.2);
          }
        }
        li.active {
          background: #ff6b19;
          border-radius: 4px;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 63px;
            text-align: left;
            font-style: normal;
          }
        }
        li:hover {
          background: #ff6b19;
          border-radius: 4px;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: #ffffff;
            line-height: 63px;
            text-align: left;
            font-style: normal;
          }
        }
      }
    }
    .content {
      flex: 1;
      margin-left: 70px;
      padding-top: 150px;
      > h1 {
        font-family: "font-one";
        font-weight: 900;
        font-size: 260px;
        color: #ff6b19;
        line-height: 260px;
        text-align: right;
        font-style: normal;
        height: 260px;
      }
      .article {
        // margin-top: 85px;
        .title {
          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 40px;
          color: #2a2a2a;
          line-height: 60px;
          text-align: left;
          font-style: normal;
        }
        .subtitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28px;
          color: #2a2a2a;
          line-height: 40px;
          text-align: left;
          font-style: normal;
          position: relative;
          margin-top: 60px;
        }
        .subtitle:before {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 112px;
          height: 12px;
          background: linear-gradient(
            270deg,
            rgba(255, 107, 25, 0) 0%,
            #ff6b19 100%
          );
        }
        .section {
          margin-top: 40px;
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #2a2a2a;
            line-height: 30px;
            text-align: left;
            font-style: normal;
          }
          .points {
            li {
              list-style-type: disc;
              h1 {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 16px;
                color: #2a2a2a;
                line-height: 30px;
                text-align: left;
                font-style: normal;
                margin-bottom: 10px;
              }
            }
          }
        }
        .footer-img {
          margin-top: 50px;
          img {
            width: 100%;
            display: block;
          }
        }
      }
    }
  }
}
</style>
  